import React, { memo,useEffect,useState } from 'react'
import { useSelector } from "react-redux";
import { Button, Card,List} from 'antd';
import { ArrowLeftOutlined } from "@ant-design/icons";
import { reqProductById,reqCategoryById  } from "@/network";

import { DetailWrapper } from "./style";

export default memo(function HjDetail(props) {
  
  // props state
  const productId = props.match.params.id
  const [currentProduct, setCurrentProduct] = useState({});
  const [productimgs, setProductimgs] = useState([]);
  const [categoryId, setCategoryId] = useState('');
  const [categoryname, setCategoryname] = useState('');
  const [isLoading, setIsLoading] = useState(true);

  // // redux hooks
  const {productList} = useSelector(state => ({
    productList:state.product.productList
  }))
  // // other hooks
  useEffect(() => {
   const productItem=productList.find((item)=>item._id===productId)
   if(productItem){ //有值的话就从redux中获取。没有的话就发请求获取
     setCurrentProduct(productItem)
     setProductimgs(productItem.imgs)
     setCategoryId((cate)=>{
       //传一个函数，让useState变成同步更新 在保存categoryId到redux中
      const newcateId = productItem.categoryId
       getCategoryById(newcateId)
       return newcateId
     })
   }else{
    //  没有的话就发请求获取
    getProductById(productId)
   }
   getCategoryById(categoryId)
   
  }, [productList,productId,categoryId]);

  // 发请求根据id获取商品
  const getProductById = async(id)=>{
    const result = await reqProductById(id)
    const {status,data} = result
    if(status===0){
      setCurrentProduct(data)
      setProductimgs(data.imgs)
      setCategoryId(data.categoryId)
    }
  }

  // 发请求根据分类id获取商品的分类名
  const getCategoryById = async(categoryId)=>{
  const result = await reqCategoryById(categoryId)
  setIsLoading(false)//请求回来后, 取消loading状态
  const {status,data} = result
  if(status===0){
    setCategoryname(data.name)
  }
}
  return (
    <DetailWrapper>
      <Card 
          title={
                 <div className="detail-title">
                   <Button type="link"  icon={<ArrowLeftOutlined />} onClick={()=>{props.history.goBack()}}/>
                    <h3>商品详情</h3>
                 </div>
           }
      >
          <List loading={isLoading}>
             <List.Item>
                <div>
                  <span className="prod-name">商品名称：</span>
                  <span>{currentProduct.name}</span>
                </div>
             </List.Item>
              <List.Item>
                <div>
                  <span className="prod-name">商品描述：</span>
                  <span>{currentProduct.desc}</span>
                </div>
             </List.Item> 
             <List.Item>
                <div>
                  <span className="prod-name">商品价格：</span>
                  <span>￥{currentProduct.price}</span>
                </div>
             </List.Item> 
             <List.Item>
                <div>
                  <span className="prod-name">所属分类：</span>
                  <span>{categoryname}</span>
                </div>
             </List.Item>
              <List.Item>
                <div>
                  <span className="prod-name">商品图片：</span>
                  {
                    productimgs.map(item=>{
                      return (
                        <img src={'/upload/'+item} alt=""  key={item} style={{width:'150px'}}/>
                      )
                    })
                  }
                </div>
             </List.Item>
             <List.Item>
                <div className="detail">
                  <div className="prod-detail">商品详情：</div>
                  <div dangerouslySetInnerHTML={{__html:currentProduct.detail}}></div>
                </div>
             </List.Item>
          </List>
    </Card>
    </DetailWrapper>
  )
})
